<template>
  <view class="device-list-container">
    <view class="header">
      <text class="title">洗车设备</text>
      <text class="subtitle">选择空闲设备开始洗车</text>
    </view>
    
    <view class="filter-bar">
      <u-tabs
        :list="tabList"
        :current="currentTab"
        @change="changeTab"
        lineColor="#007aff"
      ></u-tabs>
    </view>
    
    <view class="device-list">
      <view 
        class="device-item" 
        v-for="device in filteredDevices" 
        :key="device.id"
        @click="selectDevice(device)"
      >
        <view class="device-info">
          <view class="device-name">{{ device.name }}</view>
          <view class="device-location">{{ device.location }}</view>
        </view>
        
        <view class="device-status">
          <u-tag 
            :text="getStatusText(device.status)" 
            :type="getStatusType(device.status)"
            size="mini"
          />
        </view>
        
        <view class="device-price">
          <text class="price">¥{{ device.price }}</text>
          <text class="unit">/次</text>
        </view>
        
        <view class="device-wait-time" v-if="device.waitTime > 0">
          <u-icon name="clock" size="14" color="#999"></u-icon>
          <text class="wait-text">{{ device.waitTime }}分钟</text>
        </view>
      </view>
      
      <view class="no-data" v-if="filteredDevices.length === 0">
        <u-empty 
          mode="list" 
          text="暂无设备数据" 
          icon="http://cdn.uviewui.com/uview/empty/list.png"
        >
        </u-empty>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { onLoad, onShow } from '@dcloudio/uni-app'
import { useDeviceStore } from '@/store/device'
import { getDeviceList } from '@/api/device'

interface TabItem {
  name: string
  value: string
}

// 设备store
const deviceStore = useDeviceStore()

// 标签页
const tabList = ref<TabItem[]>([
  { name: '全部', value: 'all' },
  { name: '可用', value: 'available' },
  { name: '占用', value: 'occupied' }
])

const currentTab = ref(0)

// 过滤后的设备列表
const filteredDevices = computed(() => {
  const devices = deviceStore.getDevices
  const currentFilter = tabList.value[currentTab.value].value
  
  if (currentFilter === 'all') {
    return devices
  }
  
  return devices.filter(device => device.status === currentFilter)
})

// 获取状态文本
const getStatusText = (status: string) => {
  const statusMap: Record<string, string> = {
    available: '空闲',
    occupied: '占用',
    maintenance: '维护',
    offline: '离线'
  }
  
  return statusMap[status] || status
}

// 获取状态类型
const getStatusType = (status: string) => {
  const typeMap: Record<string, string> = {
    available: 'success',
    occupied: 'warning',
    maintenance: 'error',
    offline: 'info'
  }
  
  return typeMap[status] || 'info'
}

// 切换标签页
const changeTab = (index: number) => {
  currentTab.value = index
}

// 选择设备
const selectDevice = (device: any) => {
  if (device.status !== 'available') {
    uni.showToast({ title: '设备不可用', icon: 'none' })
    return
  }
  
  // 设置当前设备
  deviceStore.setCurrentDevice(device)
  
  // 跳转到设备控制页面
  uni.navigateTo({
    url: `/pages/device/control?id=${device.id}`
  })
}

// 加载设备列表
const loadDevices = async () => {
  uni.showLoading({ title: '加载中...' })
  
  try {
    const res = await getDeviceList()
    
    if (res.code === 200) {
      deviceStore.setDevices(res.data)
    } else {
      uni.showToast({ title: res.message, icon: 'none' })
    }
  } catch (error) {
    uni.showToast({ title: '加载失败，请重试', icon: 'none' })
  } finally {
    uni.hideLoading()
  }
}

onMounted(() => {
  // 初始化设备数据
  deviceStore.initDevices()
})

onLoad(() => {
  // 页面加载时的逻辑
})

onShow(() => {
  // 页面显示时重新加载数据
  loadDevices()
})
</script>

<style lang="scss" scoped>
.device-list-container {
  padding: 20rpx;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.header {
  background-color: #fff;
  border-radius: 20rpx;
  padding: 40rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.05);
}

.title {
  font-size: 48rpx;
  font-weight: bold;
  color: #333;
  display: block;
  margin-bottom: 10rpx;
}

.subtitle {
  font-size: 28rpx;
  color: #999;
}

.filter-bar {
  background-color: #fff;
  border-radius: 20rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.05);
}

.device-list {
  padding: 20rpx 0;
}

.device-item {
  background-color: #fff;
  border-radius: 20rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  display: flex;
  align-items: center;
  box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.05);
}

.device-info {
  flex: 1;
}

.device-name {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 10rpx;
}

.device-location {
  font-size: 26rpx;
  color: #999;
}

.device-status {
  margin-right: 30rpx;
}

.device-price {
  text-align: right;
  margin-right: 30rpx;
}

.price {
  font-size: 36rpx;
  font-weight: bold;
  color: #ff6600;
}

.unit {
  font-size: 24rpx;
  color: #999;
  margin-left: 5rpx;
}

.device-wait-time {
  display: flex;
  align-items: center;
  color: #999;
  font-size: 24rpx;
}

.wait-text {
  margin-left: 10rpx;
}

.no-data {
  padding: 100rpx 0;
  text-align: center;
}
</style>